<template>
    <div class="w-full box-border p-16px">
        <div class="mg-b-16">
            <filterComponent v-model:filter-data="filterData" @doSearch="handleSearch" />
        </div>
        <el-card>
            <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                <!-- <template #settings>
                <el-table-column fixed="right" label="操作" width="120">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="toDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </template> -->
            </tableComponent>
        </el-card>
        <dialogImport v-model:show="showDialog" @refresh="handleRefresh" />
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import dialogImport from './components/dialogImport.vue'
import { getList, getSalesList, importBaobaiData } from '@/api/baobai/index.ts'

const showDialog = ref(false)

const filterData = ref({
    list: {
        companyName: {
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
        salesId: {
            name: '所属商务',
            prop: 'salesId',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [],
            defaultAttrs: {
                label: 'salesName',
                value: 'id'
            },
            handleFocus: (item) => {
                getSalesList().then(res => {
                    console.log(1111, res)
                    item.options = res
                })
            },
            handleChange: (item) => {
            }
        },
        paymentStatus: {
            name: '状态',
            prop: 'paymentStatus',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '付款成功',
                    value: 0
                },
                {
                    label: '退款',
                    value: 1
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
        paymentDate: {
            name: '付款时间',
            prop: 'paymentDate',
            value: [],
            placeholder: '请选择',
            type: 'date',
            dateType: 'date',
            handleFocus: (item) => {

            },
            handleChange: (item) => {
                console.log(1111, item.value)
            }
        },
    },
    buttonList: [
        {
            icon: 'Plus',
            name: '批量导入',
            click: () => {
                showDialog.value = true
            }
        }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户名称',
        prop: 'companyName',
        width: 200,
    },
    {
        label: '商务负责人',
        prop: 'salesName',
        width: 120,
    },
    {
        label: '所属分组',
        prop: 'deptName',
    },
    {
        label: '开户金额',
        prop: 'price',
        width: 100,
        prefix: '¥',
        style: {
            color: '#FF7642'
        }
    },
    {
        label: '状态',
        prop: 'paymentStatus',
        width: 100
    },
    {
        label: '付款时间',
        prop: 'paymentDate',
        width: 120,
        sortable: 'custom'
    },
    {
        label: '付款方式',
        prop: 'paymentType',
        width: 120
    },
    {
        label: '开通时间',
        prop: 'openDate',
        width: 120,
        sortable: 'customer'
    },
    {
        label: '到期时间',
        prop: 'endDate',
        width: 120,
        sortable: 'customer'
    },
    {
        label: '销售场景',
        prop: 'salesScenario',
    }
])

const sortOrder = ref('')
const sortField = ref('')

const tableData = ref([])

const sortMethod = (orderInfo) => {
    if (orderInfo.order) {
        const map = {
            ascending: 'ASC',
            descending: 'DESC'
        }
        sortField.value = orderInfo.prop,
            sortOrder.value = map[orderInfo.order]
    } else {
        sortField.value = null
        sortOrder.value = null
    }
    getData()
}

const handleSearch = () => {
    getData()
}

const handlePageChange = () => {
    getData()
}

const toDetail = () => {
    console.log(2222)
}

const createQuery = () => {
    const query = {}
    for (const key in filterData.value.list) {
        if (filterData.value.list[key].prop === 'date') {
            query.startTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[0] : ''
            query.endTime = filterData.value.list[key].value?.length ? filterData.value.list[key].value[1] : ''
        } else {
            query[filterData.value.list[key].prop] = filterData.value.list[key].value
        }
    }
    return query
}

const toLine = (name) => {
    if (!name) return ''
    return name.replace(/([A-Z])/g, '_$1').toLowerCase()
}

const getData = () => {
    getList({
        ...createQuery(),
        pageSize: pageInfo.value.pageSize,
        pageNum: pageInfo.value.pageNum,
        sortField: toLine(sortField.value),
        sortOrder: sortOrder.value
    }).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount
    })
}

const handleRefresh = () => {
    pageInfo.value.pageNum = 1
    getData()
}

onMounted(() => {
    getData()
})
</script>
<style lang="scss" scoped>
.container {
    padding: 16px;
}
</style>